import React, {Component} from "react";
import {
	View,
	Text,
	Image,
	StyleSheet,
	FlatList,
	DeviceEventEmitter,
} from "react-native";
import { List, Stepper, Checkbox, Button, } from "antd-mobile";
import Icon from 'react-native-vector-icons/FontAwesome';
import {observer} from "mobx-react/native";

import CartModels from "../../models/CartModels";
import CartItems from "./CartItems";

const CheckboxItem = Checkbox.CheckboxItem;
const Item = List.Item;


@observer
export default class Demo extends React.Component {
	static navigationOptions = {
		title: "购物车",
	}
	constructor(props) {
		super(props);
		this.dataModels = new CartModels();
	}
	componentDidMount() {
		this.dataModels.replace();
	}
	allSelect = () => {
		DeviceEventEmitter.emit("allSelect", !this.dataModels.itemData.isAllSelect);
		this.dataModels.selectAll();
	}
	_keyExtractor = (item) => item._id
	_renderItems = ({item}) => (
		<CartItems item={item} dataModels={this.dataModels} />
	)
	separatorView = () => {
        return (
            <View style={{ height : 10, backgroundColor : '#e9e9e9' }}/>
        )
    };
	render() {
		return (
		  <View style={styles.container}>
		      
		      <FlatList 
		      	data={this.dataModels.itemData.datas}
		      	keyExtractor={this._keyExtractor}
		      	renderItem={this._renderItems}
		      	ItemSeparatorComponent={ this.separatorView }
		      />
		      <View style={{height: 47}}></View>
		      <View style={styles.footerBlock}>
		      	<View style={styles.checkBlock}>
			      	<Checkbox checked={this.dataModels.itemData.isAllSelect ? true : false } onChange={this.allSelect}>
			      		<Text> 全选 </Text>
			      	</Checkbox>
		      	</View>
		      	<Text style={styles.priceBlock}>
		      		合计：￥
		      		<Text>{this.dataModels.itemData.totalMoney}</Text>
		      	</Text>
		      	<Button style={styles.btnblock}>
		      		<Text style={{color: "#fff"}}>立即购买</Text>
		      	</Button>
		      </View>
		  </View>
		);
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
	},
	footerBlock: {
		flexDirection: "row",
		alignItems: "center",
		backgroundColor: gColor.whiteColor,
		position: "absolute",
		bottom: 0,

	},
	checkBlock: {
		marginLeft: 5,
		marginRight: 40,
		paddingLeft: 5,
	},
	priceBlock: {
		flex: 3,
	},
	btnblock: {
		flex: 2,
		backgroundColor: gColor.importColor,
	},

})




// import React, { Component } from 'react';
// import {
//     StyleSheet,
//     Text,
//     View,
//     Image,
//     FlatList,
//     TouchableOpacity,
//     DeviceEventEmitter,
//     Dimensions,
// } from 'react-native';

// import { observer } from 'mobx-react/native';
// import { action, autorun } from 'mobx';

// import MobxStore from '../../models/MobxStore';
// import MobxShopItemComponent from '../../models/MobxShopItemComponent';

// let jsonData = require('../../db/shoping.json');

// @observer
// export default class MobxShoppingCarPage extends Component {
//     static navigationOptions = {
//         headerTitle : '购物车',
//     };

//     constructor(props) {
//         super(props);
//         this.data = new MobxStore();
//     };

//     componentDidMount() {
//         this.data.replace(jsonData)
//     };

//     @action
//     allSelect = () => {
//         // DeviceEventEmitter.emit('allSelect', !this.data.itemData.isAllSelect);
//         console.log(!this.data.itemData.isAllSelect);
//         this.data.selectAll();
//     };

//     renderItem = (item) => {
//         return (
//             <MobxShopItemComponent itemData={ item } data={ this.data }/>
//         )
//     };

//     separatorView = () => {
//         return (
//             <View style={{ height : 10, backgroundColor : '#e9e9e9' }}/>
//         )
//     };

//     keyExtractor = (item) => item.name;

//     render() {
//         return (
//             <View style={ styles.container }>
//                 <FlatList data={ this.data.itemData.datas }
//                           ItemSeparatorComponent={ this.separatorView }
//                           renderItem={ ({ item }) => this.renderItem(item) }
//                           keyExtractor={ this.keyExtractor }
//                 />
//                 <View style={ styles.tool }>
//                     <View style={{ flex : 1, flexDirection : 'row', alignItems : 'center' }}>
//                         <TouchableOpacity style={ styles.select } onPress={ this.allSelect }>
//                             <Image source={ this.data.itemData.isAllSelect ?
//                                 require('../../imgs/login_radio_selected.png')
//                                 : require('../../imgs/login_radio_normall.png') }/>
//                             <Text style={{ marginLeft : 3 }}>全选</Text>
//                         </TouchableOpacity>
//                         <Text style={ styles.allMoneyText }>
//                             ￥{ this.data.itemData.totalMoney }
//                         </Text>
//                     </View>
//                     <TouchableOpacity style={ styles.balance } onPress={ this.allSelect }>
//                         <Text style={ styles.balanceText }>去结算</Text>
//                     </TouchableOpacity>
//                 </View>
//             </View>
//         );
//     }
// }

// const styles = StyleSheet.create({
//     container : {
//         flex : 1,
//     },
//     tool : {
//         height : 44,
//         flexDirection : 'row',
//         alignItems : 'center',
//         justifyContent : 'center',
//         borderTopWidth : 1,
//         borderTopColor : '#D3D3D3'
//     },
//     select : {
//         flexDirection : 'row',
//         justifyContent : 'center',
//         alignItems : 'center',
//         marginLeft : 15,
//     },
//     balance : {
//         width : 100,
//         height : 44,
//         backgroundColor : 'red',
//         alignItems : 'center',
//         justifyContent : 'center'
//     },
//     allMoneyText : {
//         fontSize : 20,
//         marginLeft : 15
//     },
//     balanceText : {
//         fontSize : 20,
//         color : 'white'
//     }
// });